﻿<!DOCTYPE>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <title>有限产能工序级排产查看</title>
    <link rel="stylesheet" type="text/css" href="/InSiteWebApplication/Content/AnyGantt/css/anychart-ui.min.css" />        
    <link rel="stylesheet" type="text/css" href="/InSiteWebApplication/Content/AnyGantt/fonts/css/anychart-font.min.css" />
   
   
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />

    <style type="text/css">
        .anychart-credits
        {
            display:none;
            }
    </style>
</head>
<body>
    <div class="panelSection">    
        <div class="easyui-panel " title="显示区域" style="padding:3px;width: 100%" 
        data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
            <div style ="margin:3px 0 0 3px" >
                <div style="display:inline-block;  ">
                    <div style="float:left;background:#64b5f6;width:20px;height:20px" ></div>
                    <div style="float:left;margin-left:5px">:正排</div>
                </div>
                
                <div style=" margin-left:10px;display:inline-block; ">
                    <div style="float:left;background:#009688;width:20px;height:20px" ></div>
                    <div style="float:left;margin-left:5px">:倒排</div>
                </div>

                <div style=" margin-left:10px;display:inline-block; ">
                    <div style="float:left;background:#9d8a0e;width:20px;height:20px" ></div>
                    <div style="float:left;margin-left:5px">:瓶颈排</div>
                </div>

                <div style="clear:both" ></div>
            </div>
        </div>
    </div> 

    <div id="container"></div>

    <div id="dg" style="display:none" >
        
    </div>
</body>
</html>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/ReferenceJsLib.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/zh-cn.js"></script>  
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-base.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-ui.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-exports.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-gantt.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-data-adapter.min.js"></script>

<script type="text/javascript">
    var page = {
        parentID:'',//父窗体div
        isCompare:'false',//是否进行策略对比
        rootPath: getRootPath(), //网站根路径
        ajaxUrl: getRootPath() + "/Ashx/ApsHandler/ApsLimitedCapacityHandler.ashx",
        param: [{containerID:'0004108000005758',apsPlanInfoIDs:'ad554653-f360-4d0e-bb20-12f27b5ab0a7,39496eda-4b3c-4988-85a1-89370cba9173'} ], //需要查看的id
        //初始化页面
        init: function () {
            page.bind();
            page.loadLimitedCapacity();
        },
        bind:function(){

        },
        treeData:null,
        returnData:null,
        recountApsData:function(parentId,itemId,differ){
            page.returnData.forEach(item=>{
                if(item.id==parentId)//批次级计划
                {
                    let start=dayjs(item.periods[0].start).add(differ,'ms').format("YYYY/MM/DD HH:mm:ss");
                    let end=dayjs(item.periods[0].end).add(differ,'ms').format("YYYY/MM/DD HH:mm:ss");

                    item.periods[0].start=start;
                    item.periods[0].end=end;
                    item.customData.differ=differ;
                    item.customData.constarttime=start;
                    item.customData.conendtime=end;
                    //更新treeData
                    var treeItem= page.treeData.filter(_treeItem=>{
                        return _treeItem.get('id')==item.id;
                    });
                    if(treeItem!=null){
                    
                       var prePeriods=treeItem[0].get('periods');
                       prePeriods[0].start=item.periods[0].start;
                       prePeriods[0].end=item.periods[0].end;
                       treeItem[0].set('periods',prePeriods);
                       treeItem[0].get('customData').differ=differ;

                       //console.log(treeItem);
                    }
                    

                }else if(item.parent==parentId)//工序级计划
                {
                    item.periods[0].start=dayjs(item.periods[0].start).add(differ,'ms').format("YYYY/MM/DD HH:mm:ss");
                    item.periods[0].end=dayjs(item.periods[0].end).add(differ,'ms').format("YYYY/MM/DD HH:mm:ss");

                    //更新treeData
                    var treeItem= page.treeData.filter(_treeItem=>{
                        return _treeItem.get('id')==item.id;
                    });
                    if(treeItem!=null){

                       var prePeriods=treeItem[0].get('periods');
                       prePeriods[0].start=item.periods[0].start;
                       prePeriods[0].end=item.periods[0].end;
                       treeItem[0].set('periods',prePeriods);

                    }
                }
            });

        },
        drawingFunction:function () {
  // get the shapes of the element
  var shapes = this["shapes"];
  // get the shape to be modified
  var path = shapes["path"];
  // get the bounds of the element
  var bounds = this["predictedBounds"];
    
//this["period"];//当前渲染的块
var item=this["item"];
if(item.numChildren()>0){
   // console.log(this.period); 
    //path.fill('green');   
}

  //console.log(this["predictedBounds"]);

  var h = bounds.height;
  var t = bounds.top;
  var l = bounds.left;
  var r = l + bounds.width;
  var h1 = t + h;   

let period=this['period'];
let customData=period.customData;
if(customData!=null){

if(page.isCompare=="true"&&customData.apsType!=null){
    if(customData.apsType=="1"){
        h=15;
        //t=t-2*h;
        h1=t+h;
    }else if (customData.apsType=="2"){
        h=15;
        t=t+15;
        h1=t+h;
    }else if(customData.apsType=="3"){
        h=15;
        t=t+30;
        h1=t+h;
    }
}

    if(customData.isHolidate!=null){

    h1+=4;
    t-=3;
    path.fill('#ccc');   
    //console.log(this['period']);

    }

}
   
  //var h4 = h/4;
  //var h2 = h/2;

  // draw a rounded rectangle
//  path.moveTo(l + h4, h1 - h4)
//  path.arcTo(h4,h4, -270, 180)
//  path.lineTo(r - h4, t + h4)
//  path.arcTo(h4, h4, -90, 180)
//  path.lineTo(l + h2, h1 - h4)
//  path.close(); 

  path.moveTo(l, t);
  path.lineTo(l , h1 );
  path.lineTo(r, h1);
  path.lineTo(r, t);

  //console.log(path.domElement());

  path.close(); 


},
        resetContainer:function(){
            $("#container").empty();
        },
        getApsTypeName:function(apsType){
             if ( apsType=="1"){
                return "正";
            }else if ( apsType=="2")
            {
                return "倒";
            }else if ( apsType=="3")
            {
                return "瓶";
            }else{
                return "";
            }
        },
        timelineTooltip:function(_this){
            var period=_this.period;
            var numChildren = _this.item.numChildren();

            var startDate = anychart.format.dateTime(_this.start, "yyyy-MM-dd HH:mm:ss");
            var endDate = anychart.format.dateTime(_this.end, "yyyy-MM-dd HH:mm:ss");
            
            var parentText ="";

            var childText =""

            if(period!=null)//悬停在period上
            {
                childText="<span style='font-weight:600;font-size:12pt'>" + 
                                period.text+ "<br>"+
                                '开始:'+startDate + "<br>"+
                                '结束:'+endDate+"</span>";

                parentText ="<span style='font-weight:600;font-size:12pt'>" + 
                                period.text+ "<br>"+
                                '开始:'+startDate + "<br>"+
                                '结束:'+endDate+"</span>"
                        
            }else{
                let periods= _this.item.get('periods');
                childText="<span style='font-weight:600;font-size:12pt'>"; 

                parentText="<span style='font-weight:600;font-size:12pt'>"; 
                periods.forEach(function(_period){
                    var _apsTypeName=page.getApsTypeName(_period.customData.apsType);
                    childText+=_apsTypeName+_period.start+" 到 "+_period.end+ "<br>";

                    parentText+=_apsTypeName+_period.start+" 到 "+_period.end+ "<br>";
                })
                childText+="</span>";

                parentText+="</span>";

            }
                     
            // identify the resource type and display the corresponding text
            if (numChildren > 0) {
            //console.log(this.item.getChildAt(0).get('periods'));
            return parentText;
            } else {
            //console.log(this.item.get('periods'));
            return childText;
            }
        },
        loadLimitedCapacity: function () { //有限产能加载方法
            anychart.onDocumentReady(function () {

                anychart.data.loadJsonFile(page.ajaxUrl + "?action=getStepLimitedAps&param="+JSON.stringify(page.param), function (result) {

                    anychart.format.outputLocale('zh-cn');
                    //anychart.format.outputDateTimeFormat('yyyy-MM-dd');
                    anychart.format.inputDateTimeFormat("yyyy/MM/dd HH:mm:ss");

                    if(result.Result==false){
                        displayMessage(result.Message, false);
                        return;
                    }

                    var data=JSON.parse(result.ReturnData);
                    page.returnData=JSON.parse(result.ReturnData);
                    
                    //console.log(data);

                    // create data tree on raw data
                    var treeData = anychart.data.tree(data, 'as-table');

                    page.treeData=treeData;
                    // create resource gantt chart
                    chart = anychart.ganttResource();
                    if(page.isCompare=="true"){                        
                        chart.defaultRowHeight(50);
                    }else{
                        chart.defaultRowHeight(20);
                    }
                    chart.splitterPosition(490); //左边grid宽度

                    // set data for the chart
                    chart.data(treeData);

                    //设置列
                    var dataGrid = chart.dataGrid();

                    dataGrid.column(0)
                            .title('')
                            .width(30)
                            .cellTextSettings({ hAlign: 'center' });
                    dataGrid.column(1)
                            .title("任务")
                            .cellTextSettings({ hAlign: 'left', fontSize:12,useHtml:true})                         
                            .format(item=>{
                                var _periods=item.get('periods');
                                var name=item.get('name');
                                var customData=_periods[0].customData;
                                if(customData.isCurStep=="1"){//当前序                                
                                    return "<span style='white-space:nowrap;color:red'>"+name+"(当前序)</span>";
                                }else{
                                    //return name;
                                    return "<span style='white-space:nowrap'>"+name+"</span>";
                                }

                            }); 
                    dataGrid.column(2)
                            .title("开始时间")
                            .width(140)
                            .cellTextSettings({ hAlign: 'left',fontSize:12,useHtml:true})//fontColor:'red' 
                            .format(item=>{
                                var _periods=item.get('periods');
                                var gridEnd="";
                                _periods.forEach(function(i){
                                gridEnd+=page.getApsTypeName(i.customData.apsType)+":"+i.start.substr(0,i.start.lastIndexOf(":"))+"</br>";
                                });
                                if(_periods[0].customData.isCurStep=="1"){
                                    return "<span style='white-space:nowrap;color:red'>"+gridEnd+"</span>";
                                }else{
                                    return "<span style='white-space:nowrap'>"+gridEnd+"</span>";                               
                                }
                            });
                    dataGrid.column(3)
                            .title("结束时间")
                            .width(140)
                            .cellTextSettings({ hAlign: 'left',fontSize:12,useHtml:true })
                            .format(item=>{
                                 var _periods=item.get('periods');
                                 var gridEnd="";
                                 _periods.forEach(function(i){
                                    gridEnd+=page.getApsTypeName(i.customData.apsType)+":"+i.end.substr(0,i.end.lastIndexOf(":"))+ "</br>";
                                 });
                                 if(_periods[0].customData.isCurStep=="1"){
                                    return "<span style='white-space:nowrap;color:red'>"+gridEnd+"</span>";
                                 }
                                 else{
                                    return "<span style='white-space:nowrap'>"+gridEnd+"</span>";                                      
                                 }
                            });
                     //datagrid tooltips
                    dataGrid.tooltip().useHtml(true); 

                    var periods = chart.getTimeline().periods();

                    // set the height of periods
                    if(page.isCompare=="true"){  
                       periods.height(47);
                    }
                    // draw custom periods
                    periods.rendering().drawer(page.drawingFunction);

                    //图形块的label
                    var periodLabels =periods.labels();
                    periodLabels.enabled(true);
                    periodLabels.useHtml(true);
                    periodLabels.fontColor("#104d89");
                    periodLabels.fontWeight(600);
                    periodLabels.format(function() {
                        let customData=this.period.customData;
                        if(customData!=null){
                            if(customData.isHolidate!=null&&customData.isHolidate=='1'){
                                var text='<span style="color:#fff;font-wieght:bold">'+this.period.text+'</span>';
                                return text;     
                            }
                        }
                    });

                    // configure tooltips of the timeline
                chart.getTimeline().tooltip().useHtml(true);
                chart.getTimeline().tooltip().format(function() {
                    return  page.timelineTooltip(this);
                });

                    // make chart editable
                    //chart.editing(true);
                    //chart.getTimeline().edit(true);

                    chart.contextMenu(false);//禁用右键

                    // set container id for the chart
                    chart.container('container');

                    // initiate chart drawing
                    chart.draw();
                                       
                    // zoom chart all dates range
                    chart.fitAll();

                    // Enable chart redrawing.
                    chart.autoRedraw(true);

                    //chart.zoomTo("week", 3, "first-date");
                                       
                    chart.listen("rowDblClick", function (e) {
                        if(e.period!=null){
                            var popupParam={containers:[]};
                            var _container={};
                            var parent=e.item.getParent();
                            if(parent==null){
                                _container.containerId=e.item.get('customData').containerid;
                                _container.workflowId=e.item.get('customData').workflowid;
                                _container.workflowStepId='';
                            }else{
                                _container.containerId=parent.get('customData').containerid;  
                                _container.workflowId=parent.get('customData').workflowid;  
                                _container.workflowStepId=e.item.get('id');                     
                            }
                            _container.apsType=e.period.customData.apsType;

                            popupParam.containers.push(_container);

                            var url="ApsLMStepDetailPage.html?v=" + new Date().getTime();
                            url += "&parentDiv=dg";
                            $('#dg').dialog({
                                title: '批次工序排产计划详细查看',
                                fit: true,
                                top: 10,
                                closed: false,
                                cache: false,
                                modal: true,
                                content: '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="auto"></iframe>',
                                returnData:null,
                                popupData: popupParam, //弹出页面的传参
                                onClose: function () {
                                    var returnData = $("#dg").dialog('options').returnData; //返回数据
                                    if (returnData != null&&returnData.isParentRefresh) {
                                        //console.log('更新父级数据');
                                        $("#container").empty();
                                        page.loadLimitedCapacity();
                                        //displayMessage("调整成功", true);
                                    }


                                }
                            });

                        }
                    });
                });
            });
        }
    }

$(function () {
    //获取传参
   // alert(getParam("isCompare"));
    page.parentID = getParam("parentDiv");    
    page.isCompare=getParam("isCompare");
    page.param=parent.$("#" + page.parentID).dialog('options').popupData;
   //page.isCompare='true';

    page.init();

});
</script>
